<template>
  <div>
    <el-row>
      <el-col :span="4">
        <div class="tree">
          <el-input placeholder="过滤关键字" v-model="filterText"/>
          <el-tree :data="empData" :props="defaultProps" :filter-node-method="filterNode" 
            @node-click="handleNodeClick" ref="tree"/>
        </div>
      </el-col>
      <el-col :span="20">
        <div v-if="currentDevice.id" class="p-4">
          <el-card class="mb-6">
            <template #header>
              <div class="clearfix">
                <span>设备信息</span>
                <el-button style="float:right" type="text" @click="refreshDeviceInfo" :loading="loading">
                  <i class="el-icon-refresh"/>
                </el-button>
              </div>
            </template>
            <div class="grid grid-cols-2 gap-4">
              <div><span>设备名称：</span>{{ currentDevice.name||'-' }}</div>
              <div><span>设备编号：</span>{{ currentDevice.serial_number||'-' }}</div>
              <div><span>绑定状态：</span><el-tag :type="currentDevice.bind_status===1?'success':'danger'">
                {{ currentDevice.bind_status===1?'已绑定':'未绑定' }}</el-tag></div>
              <div><span>在线状态：</span><el-tag :type="currentDevice.online_status===1?'success':'danger'">
                {{ currentDevice.online_status===1?'在线':'离线' }}</el-tag></div>
              <div><span>经度：</span>{{ currentDevice.longitude||'-' }}</div>
              <div><span>纬度：</span>{{ currentDevice.latitude||'-' }}</div>
              <div><span>安装时间：</span>{{ formatTime(currentDevice.insert_time) }}</div>
            </div>
          </el-card>
  
          <el-card class="mb-6">
            <template #header><span>关联工程</span></template>
            <div class="grid grid-cols-2 gap-4">
              <div><span>工程编号：</span>{{ engineerInfo.serial_number||'-' }}</div>
              <div><span>工程名称：</span>{{ engineerInfo.name||'-' }}</div>
              <div><span>工程类型：</span>{{ engineerInfo.type||'-' }}</div>
              <div><span>工程状态：</span><el-tag :type="getStatusType(engineerInfo.status)">
                {{ engineerInfo.status||'-' }}</el-tag></div>
              <div><span>负责人：</span>{{ engineerInfo.charge_id?`工号：${engineerInfo.charge_id}`:'-' }}</div>
              <div><span>创建时间：</span>{{ formatTime(engineerInfo.create_time) }}</div>
              <div><span>开始时间：</span>{{ formatTime(engineerInfo.begin_time) }}</div>
              <div><span>结束时间：</span>{{ formatTime(engineerInfo.end_time) }}</div>
              <div class="col-span-2"><span>地址：</span>{{ formatAddress(engineerInfo.address) }}</div>
            </div>
          </el-card>
        </div>
        <div v-else class="empty-tip">
          <el-empty description="请选择左侧设备"><el-button disabled>查看详情</el-button></el-empty>
        </div>
      </el-col>
    </el-row>
  </div>
  </template>
  
  <script>
  import { get } from '@/utils/request'
  export default {
    data: () => ({
      filterText: '',
      empData: [],
      defaultProps: { children: 'children', label: 'name' },
      currentDevice: {},
      engineerInfo: {},
      loading: false
    }),
    watch: { filterText(v) { this.$refs.tree.filter(v) } },
    methods: {
      async handleNodeClick(n) {
        if (!n.children) {
          this.loading = true
          try { 
            const r = await get('/device/findDeviceDetail', { id: n.id })
            this.currentDevice = r.data
            this.engineerInfo = r.data.engineer || {} 
          } finally { this.loading = false }
        }
      },
      async refreshDeviceInfo() {
        if (!this.currentDevice.id) return
        this.loading = true
        try { 
          const r = await get('/device/findDeviceDetail', { id: this.currentDevice.id })
          this.currentDevice = r.data
          this.engineerInfo = r.data.engineer || {}
        } finally { this.loading = false }
      },
      formatTime(t) { return t ? new Date(t).toLocaleString() : '-' },
      formatAddress(a) { return a ? a.replace(/undefined|,/g, ' ') : '-' },
      getStatusType(s) { return {'监测中':'success','已完工':'info','未开始':'warning','暂停':'danger'}[s]||'info' },
      filterNode(v,d) { return !v || d.name.includes(v) },
      async getEmpData() { 
        try { 
          const r = await get('/dashboard/findEngineerDeviceTree')
          this.empData = r.data 
        } catch { this.$message.error('加载失败') }
      }
    },
    created() { this.getEmpData() }
  }
  </script>
  
  <style scoped>
  .tree { height: calc(100vh - 60px); border-right:1px solid #ededed; padding-right:10px }
  .empty-tip { height: calc(100vh - 60px); display: grid; place-items: center }
  .mb-6 { margin-bottom:1.5rem }
  .p-4 { padding:20px }
  </style>